<template>
  <div>
    <!-- 文章标题 -->
    <div class="block">文章标题</div>
    <div style="margin-bottom: 15px">
      <el-input v-model="form.title" placeholder="请输入文章标题"></el-input>
    </div>

    <!-- 文章编辑 -->
    <div class="block">文章编辑</div>
    <editor
      :initialValue="form.editorText"
      :options="editorOptions"
      ref="toastuiEditor"
      height="600px"
    />

    <!-- 文章描述 -->
    <div class="block">文章描述</div>
    <el-input v-model="form.description" type="textarea" :rows="6"></el-input>

    <!-- 文章头图 -->
    <UploadImg uploadTitle="文章头图" v-model="form.thumb" />

    <!-- 选择分类 -->
    <div class="block">选择分类</div>
    <el-select v-model="form.select" placeholder="请选择文章类别">
      <el-option
        v-for="item in blogType"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      ></el-option>
    </el-select>

    <!-- 发布按钮 -->
    <div style="width: 100%; text-align: center">
      <el-button type="primary" style="margin: 40px 0" @click="addArticleHandle"
        >{{btnContent = mode === "add" ? btnContent : "确认修改"}}</el-button
      >
    </div>
  </div>
</template>

<script>
import "@toast-ui/editor/dist/toastui-editor.css";
import { Editor } from "@toast-ui/vue-editor";
import UploadImg from "@/components/UploadImg";
import { getBlogType } from "@/api/blogType";
import { addBlog, getOneBlog, updateBlog } from "@/api/blog";
import "@toast-ui/editor/dist/i18n/zh-cn";

export default {
  props: ["mode"],
  components: {
    editor: Editor,
    UploadImg,
  },
  data() {
    return {
      form: {
        title: "",
        editorText: "", // 用户编辑的内容
        description: "",
        thumb: "",
        select: "", // 选择分类
      },
      blogType: [], // 存放博客分类
      editorOptions: {
        language: "zh-CN",
      },
      btnContent: '发布文章'
    };
  },
  created() {
    getBlogType().then(({ data }) => {
      this.blogType = data;
    });
    if (this.mode === "edit") {
      this.id = this.$router.history.current.params.id;
      getOneBlog(this.id).then(({ data }) => {
        this.form = data;
        this.form.select = data.categoryId ? data.categoryId : "";
        this.$refs.toastuiEditor.invoke("setHTML", data.htmlContent);
      });
    }
  },
  methods: {
    // 添加文章
    addArticleHandle() {
      let html = this.$refs.toastuiEditor.invoke("getHTML");
      let markdown = this.$refs.toastuiEditor.invoke("getMarkdown");
      let obj = {
        title: this.form.title,
        description: this.form.description,
        createDate: new Date().getTime() + "",
        categoryId: this.form.select,
        htmlContent: html,
        thumb: this.form.thumb,
        morkdownContent: markdown,
      };
      if (obj.title && obj.description && obj.categoryId && obj.htmlContent) {
        if (this.mode === "add") {
          // 新增
          addBlog(obj).then(() => {
            this.$router.push("/blogList"); // 跳转到文章列表
            this.$message.success("添加成功");
          });
        } else {
          // 编辑
          updateBlog({ id: this.id, data: obj }).then(() => {
            this.$router.push("/blogList"); // 跳转到文章列表
            this.$message.success("修改成功");
          });
        }
      } else {
        this.$message.error("请填写所有内容");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.block {
  margin: 15px 0;
  font-weight: 100;
}
</style>
